<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: 谢林芝 983546396@qq.com
 * @LastEditTime: 2022-06-29 11:27:31
-->
<template>
  <div class="DataStatistics">
    <el-button type="primary" size="medium" @click="getChainCovidData(1)"
      >当前确诊</el-button
    >
    <el-button type="primary" size="medium" @click="getChainCovidData(2)"
      >累计确诊</el-button
    >
    <el-button type="primary" size="medium" @click="getChainCovidData(3)"
      >累计死亡</el-button
    >
    <!-- 中国地图的容器 -->
    <div id="china" style="height: 500px"></div>
    <el-select
      v-model="selectprovince"
      placeholder="省份名称"
      @change="provinceChange"
    >
      <el-option
        v-for="(item, index) in selecteData"
        :key="index"
        :label="item.name"
        :value="item.mapns"
      ></el-option>
    </el-select>
    <!-- 省市的容器 -->
    <div id="city" style="height: 500px"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      chainCovidData: [], //中国数据
      cityCovidData: [], //省市数据
      selecteData: [
        { name: "北京市", mapns: "cn/beijing-北京市" },
        { name: "天津市", mapns: "cn/tianjin-天津市" },
        { name: "河北省", mapns: "cn/hebei-河北省" },
        { name: "山西省", mapns: "cn/shanxi-山西省" },
        { name: "内蒙古自治区", mapns: "cn/neimenggu-内蒙古自治区" },
        { name: "辽宁省", mapns: "cn/liaoning-辽宁省" },
        { name: "吉林省", mapns: "cn/jilin-吉林省" },
        { name: "黑龙江省", mapns: "cn/heilongjiang-黑龙江省" },
        { name: "上海市", mapns: "cn/shanghai-上海市" },
        { name: "江苏省", mapns: "cn/jiangsu-江苏省" },
        { name: "浙江省", mapns: "cn/zhejiang-浙江省" },
        { name: "安徽省", mapns: "cn/anhui-安徽省" },
        { name: "福建省", mapns: "cn/fujian-福建省" },
        { name: "江西省", mapns: "cn/jiangxi-江西省" },
        { name: "山东省", mapns: "cn/shandong-山东省" },
        { name: "河南省", mapns: "cn/henan-河南省" },
        { name: "湖北省", mapns: "cn/hubei-湖北省" },
        { name: "湖南省", mapns: "cn/hunan-湖南省" },
        { name: "广东省", mapns: "cn/guangdong-广东省" },
        { name: "广西壮族自治区", mapns: "cn/guangxi-广西壮族自治区" },
        { name: "海南省", mapns: "cn/hainan-海南省" },
        { name: "重庆市", mapns: "cn/chongqing-重庆市" },
        { name: "四川省", mapns: "cn/sichuan-四川省" },
        { name: "贵州省", mapns: "cn/guizhou-贵州省" },
        { name: "云南省", mapns: "cn/yunnan-云南省" },
        { name: "西藏自治区", mapns: "cn/xizang-西藏自治区" },
        { name: "陕西省", mapns: "cn/shanxi2-陕西省" },
        { name: "甘肃省", mapns: "cn/gansu-甘肃省" },
        { name: "青海省", mapns: "cn/qinghai-青海省" },
        { name: "宁夏回族自治区", mapns: "cn/ningxia-宁夏回族自治区" },
        { name: "新疆维吾尔自治区", mapns: "cn/xinjiang-新疆维吾尔自治区" },
        { name: "香港", mapns: "cn/xianggang-香港" },
        { name: "澳门", mapns: "cn/aomen-澳门" },
      ],
      selectprovince: "广西壮族自治区", //选择的值
      province: "广西壮族自治区", //省份名称
      mapsn: "cn/guangxi", //所切换的地图
      title: "当前确诊人数", //
      maintitle: "各省市现有疫情确诊情况",
    };
  },
  //   一般情况下，图表类的生成方式都是在mounted生命周期中去进行
  //  因为created生命周期只是完成了data和methods的初始化，并没有完成dom的加载
  mounted() {
    // 自动获取疫情相关数据
    this.getChainCovidData();
  },
  methods: {
    //   获取中国疫情相关数据
    getChainCovidData(val = 1) {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=7ce9b48a112c13d5",
      }).then((res) => {
        // console.log(res.data.data);
        // js 数组API map

        this.chainCovidData = res.data.data.map((item) => {
          if (val == 1) {
            //当前确诊
            this.title = "当前确诊人数";
            this.maintitle = "各省市现有疫情确诊情况";
            return {
              name: item.provinceShortName,
              value: item.currentConfirmedCount,
            };
          } else if (val == 2) {
            //累计确诊
            this.title = "累计确诊人数";
            this.maintitle = "各省市累计确诊情况";

            return {
              name: item.provinceShortName,
              value: item.confirmedCount,
            };
          } else {
            //累计死亡
            this.title = "累计死亡人数";
            this.maintitle = "各省市累计死亡情况";
            return {
              name: item.provinceShortName,
              value: item.deadCount,
            };
          }
        });
        //   获取中国地图
        this.loadChainMap();
        // 筛选省市的数据
        // 过滤省市的数据 filter
        // console.log(this.province);
        let cityRes = res.data.data.filter((item) => {
          return item.provinceName == this.province;
        });

        // console.log(cityRes);
        // 将省市的数据转换成我们想要的数据

        this.cityCovidData = cityRes[0].cities.map((item) => {
          if (val == 1) {
            return {
              name: item.cityName,
              value: item.currentConfirmedCount,
            };
          } else if (val == 2) {
            return {
              name: item.cityName,
              value: item.confirmedCount,
            };
          } else {
            return {
              name: item.cityName,
              value: item.deadCount,
            };
          }
        });
        // console.log(this.cityCovidData);
        this.cityCovidData = this.cityCovidData.filter((item) => {
          return item.name != "境外输入人员" && item.name != "境外输入";
        });
        // console.log(this.cityCovidData);
        this.loadCityMap();
      });
    },
    //   加载中国地图
    loadChainMap() {
      // 初始化图表
      var map = new Highcharts.Map("china", {
        title: {
          text: this.maintitle,
        },
        colorAxis: {
          // 分区间进行色块的处理
          dataClasses: [
            {
              // 对应区间的颜色
              color: "#Fff",
              // 从哪开始
              from: 0,
            },
            {
              // 对应区间的颜色
              color: "#FCE2D8",
              // 从哪开始
              from: 1,
              // 到哪结束
              to: 9,
            },
            {
              // 对应区间的颜色
              color: "#FC9783",
              // 从哪开始
              from: 10,
              // 到哪结束
              to: 99,
            },
            {
              // 对应区间的颜色
              color: "#F27466",
              // 从哪开始
              from: 100,
              // 到哪结束
              to: 999,
            },
            {
              // 对应区间的颜色
              color: "#E34445",
              // 从哪开始
              from: 1000,
              // 到哪结束
              to: 9999,
            },
            {
              // 对应区间的颜色
              color: "#B60909",
              // 从哪开始
              from: 10000,
            },
          ],
        },
        series: [
          {
            data: this.chainCovidData,
            name: this.title,
            mapData: Highcharts.maps["cn/china"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
        // 地图导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },
    // 加载省市地图
    loadCityMap() {
      // 初始化图表
      var map = new Highcharts.Map("city", {
        title: {
          text: this.province,
        },
        colorAxis: {
          min: 0,
          minColor: "#FFF",
          maxColor: "#185DAD",
        },
        series: [
          {
            data: this.cityCovidData,
            name: this.title,
            mapData: Highcharts.maps[this.mapsn],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
        // 地图导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },
    provinceChange(val) {
      //   console.log(val);
      [this.mapsn, this.province] = val.split("-");
      //   console.log(this.province, this.mapsn);
      this.getChainCovidData();
    },
  },
};
</script>

<style scoped>
</style>
